<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>WebGL2 API | Lampow燃的博客</title>
    <meta name="generator" content="VuePress 1.9.9">
    <link rel="icon" href="/blog/assets/img/vincentRan.ico">
    <link rel="manifest" href="/blog/manifest.json">
    <script src="/blog/scripts/global.js"></script>
    <script src="/blog/assets/js/autopush-baidu.js"></script>
    <script src="/blog/assets/js/autopush-360.js"></script>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui">
    <meta name="baidu-site-verification" content="gZcjfbZtAw">
    <meta name="google-site-verification" content="cEMNM1qDYFHDq8a4c2uT9n_3yX6kCJ4KolTcLk9DhV4">
    <meta name="360-site-verification" content="8b6f7e9dff6da70522ce0d5ae8ffd923">
    <meta name="author" content="Lampow燃">
    <meta name="keywords" content="vincentRan;Lampow燃;js;Javascript基础;前端;博客">
    <meta name="theme-color" content="#3eaf7c">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="msapplication-TileColor" content="#000000">
    
    <link rel="preload" href="/blog/assets/css/0.styles.b6bf8ae6.css" as="style"><link rel="preload" href="/blog/assets/js/app.7b4540b9.js" as="script"><link rel="preload" href="/blog/assets/js/2.b0da3abb.js" as="script"><link rel="preload" href="/blog/assets/js/52.dfcb8f83.js" as="script"><link rel="preload" href="/blog/assets/js/11.d9c57454.js" as="script"><link rel="preload" href="/blog/assets/js/6.e0517a23.js" as="script"><link rel="preload" href="/blog/assets/js/4.e142f4c4.js" as="script"><link rel="prefetch" href="/blog/assets/js/10.fad52a34.js"><link rel="prefetch" href="/blog/assets/js/12.67814a82.js"><link rel="prefetch" href="/blog/assets/js/13.dff6097c.js"><link rel="prefetch" href="/blog/assets/js/14.63aca277.js"><link rel="prefetch" href="/blog/assets/js/15.2996c9e2.js"><link rel="prefetch" href="/blog/assets/js/16.97a52145.js"><link rel="prefetch" href="/blog/assets/js/17.cd17994a.js"><link rel="prefetch" href="/blog/assets/js/18.ac420f2a.js"><link rel="prefetch" href="/blog/assets/js/19.eb6b91bf.js"><link rel="prefetch" href="/blog/assets/js/20.cb363eca.js"><link rel="prefetch" href="/blog/assets/js/21.a4e99c33.js"><link rel="prefetch" href="/blog/assets/js/22.694a6ec1.js"><link rel="prefetch" href="/blog/assets/js/23.55cb3c0d.js"><link rel="prefetch" href="/blog/assets/js/24.0f31eaf1.js"><link rel="prefetch" href="/blog/assets/js/25.2eefb2bd.js"><link rel="prefetch" href="/blog/assets/js/26.9375d9cc.js"><link rel="prefetch" href="/blog/assets/js/27.15116a38.js"><link rel="prefetch" href="/blog/assets/js/28.19eef588.js"><link rel="prefetch" href="/blog/assets/js/29.49bf907e.js"><link rel="prefetch" href="/blog/assets/js/3.d02dbad1.js"><link rel="prefetch" href="/blog/assets/js/30.a3b1e05f.js"><link rel="prefetch" href="/blog/assets/js/31.e816c5a5.js"><link rel="prefetch" href="/blog/assets/js/32.0de6aa66.js"><link rel="prefetch" href="/blog/assets/js/33.0d6966b1.js"><link rel="prefetch" href="/blog/assets/js/34.9b7e8e14.js"><link rel="prefetch" href="/blog/assets/js/35.df38e2a9.js"><link rel="prefetch" href="/blog/assets/js/36.3f437700.js"><link rel="prefetch" href="/blog/assets/js/37.2c1de8b3.js"><link rel="prefetch" href="/blog/assets/js/38.86e11044.js"><link rel="prefetch" href="/blog/assets/js/39.82741cfc.js"><link rel="prefetch" href="/blog/assets/js/40.1e6de0bd.js"><link rel="prefetch" href="/blog/assets/js/41.5b9a2f33.js"><link rel="prefetch" href="/blog/assets/js/42.dbe88c0f.js"><link rel="prefetch" href="/blog/assets/js/43.48e12a76.js"><link rel="prefetch" href="/blog/assets/js/44.c5a6663b.js"><link rel="prefetch" href="/blog/assets/js/45.38f327a2.js"><link rel="prefetch" href="/blog/assets/js/46.527a0e03.js"><link rel="prefetch" href="/blog/assets/js/47.b8baaa72.js"><link rel="prefetch" href="/blog/assets/js/48.3447a56d.js"><link rel="prefetch" href="/blog/assets/js/49.cd301a0f.js"><link rel="prefetch" href="/blog/assets/js/5.d43d130b.js"><link rel="prefetch" href="/blog/assets/js/50.644742a2.js"><link rel="prefetch" href="/blog/assets/js/51.ae6a8437.js"><link rel="prefetch" href="/blog/assets/js/53.2a0715a8.js"><link rel="prefetch" href="/blog/assets/js/54.fe7d4a37.js"><link rel="prefetch" href="/blog/assets/js/55.457aa0d9.js"><link rel="prefetch" href="/blog/assets/js/56.dc026f76.js"><link rel="prefetch" href="/blog/assets/js/57.dfa47cb4.js"><link rel="prefetch" href="/blog/assets/js/58.8dfdbcbb.js"><link rel="prefetch" href="/blog/assets/js/59.67f5108d.js"><link rel="prefetch" href="/blog/assets/js/60.73f12c35.js"><link rel="prefetch" href="/blog/assets/js/61.a6281041.js"><link rel="prefetch" href="/blog/assets/js/62.a1672f34.js"><link rel="prefetch" href="/blog/assets/js/63.65b641c6.js"><link rel="prefetch" href="/blog/assets/js/64.01018dd4.js"><link rel="prefetch" href="/blog/assets/js/65.e7ffb165.js"><link rel="prefetch" href="/blog/assets/js/66.173f5f61.js"><link rel="prefetch" href="/blog/assets/js/67.5f7af08d.js"><link rel="prefetch" href="/blog/assets/js/68.d87b9899.js"><link rel="prefetch" href="/blog/assets/js/69.18f0835e.js"><link rel="prefetch" href="/blog/assets/js/7.da19f9b0.js"><link rel="prefetch" href="/blog/assets/js/70.9090fddd.js"><link rel="prefetch" href="/blog/assets/js/71.dd4e6e2c.js"><link rel="prefetch" href="/blog/assets/js/72.c42d4bf3.js"><link rel="prefetch" href="/blog/assets/js/73.5c5defd2.js"><link rel="prefetch" href="/blog/assets/js/74.b12fdeee.js"><link rel="prefetch" href="/blog/assets/js/75.7f085fdb.js"><link rel="prefetch" href="/blog/assets/js/76.f2d01ffb.js"><link rel="prefetch" href="/blog/assets/js/77.23a7ce10.js"><link rel="prefetch" href="/blog/assets/js/78.3b39d101.js"><link rel="prefetch" href="/blog/assets/js/79.42d64efd.js"><link rel="prefetch" href="/blog/assets/js/8.00fa029c.js"><link rel="prefetch" href="/blog/assets/js/80.64996c95.js"><link rel="prefetch" href="/blog/assets/js/81.a15f0118.js"><link rel="prefetch" href="/blog/assets/js/82.726c1156.js"><link rel="prefetch" href="/blog/assets/js/83.8b3a794d.js"><link rel="prefetch" href="/blog/assets/js/84.7cbe7d64.js"><link rel="prefetch" href="/blog/assets/js/85.3ec16acd.js"><link rel="prefetch" href="/blog/assets/js/86.41b3d3af.js"><link rel="prefetch" href="/blog/assets/js/87.c6e2a7c9.js"><link rel="prefetch" href="/blog/assets/js/88.4d4b145b.js"><link rel="prefetch" href="/blog/assets/js/89.04660517.js"><link rel="prefetch" href="/blog/assets/js/9.12b493d7.js"><link rel="prefetch" href="/blog/assets/js/90.9963ca39.js"><link rel="prefetch" href="/blog/assets/js/91.50f67c60.js"><link rel="prefetch" href="/blog/assets/js/92.f109d0d0.js"><link rel="prefetch" href="/blog/assets/js/93.5664c7c2.js"><link rel="prefetch" href="/blog/assets/js/94.889bd5e0.js"><link rel="prefetch" href="/blog/assets/js/95.cfcb0fb3.js">
    <link rel="stylesheet" href="/blog/assets/css/0.styles.b6bf8ae6.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/blog/" class="home-link router-link-active"><img src="/blog/assets/img/vincentRan.jpg" alt="Lampow燃的博客" class="logo"> <span class="site-name can-hide">Lampow燃的博客</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="工作台" class="dropdown-title"><span class="title">工作台</span> <span class="arrow down"></span></button> <button type="button" aria-label="工作台" class="mobile-dropdown-title"><span class="title">工作台</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/article/工作台/工作台.html" class="nav-link">
  工作台
</a></li><li class="dropdown-item"><h4>
          未来探索
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/article/未来探索/营销公司.html" class="nav-link">
  营销
</a></li><li class="dropdown-subitem"><a href="/blog/article/未来探索/野外单兵防护.html" class="nav-link">
  野外单兵防护
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="计算机原理" class="dropdown-title"><span class="title">计算机原理</span> <span class="arrow down"></span></button> <button type="button" aria-label="计算机原理" class="mobile-dropdown-title"><span class="title">计算机原理</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/article/计算机原理/CPU结构以及简单运行原理.html" class="nav-link">
  CPU结构以及简单运行原理
</a></li><li class="dropdown-item"><!----> <a href="/blog/article/计算机原理/进程和线程.html" class="nav-link">
  进程和线程
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Javascript 基础" class="dropdown-title"><span class="title">Javascript 基础</span> <span class="arrow down"></span></button> <button type="button" aria-label="Javascript 基础" class="mobile-dropdown-title"><span class="title">Javascript 基础</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/article/js-basic/数据类型.html" class="nav-link">
  数据类型
</a></li><li class="dropdown-item"><h4>
          关键字
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/article/js-basic/关键字/通用关键字.html" class="nav-link">
  通用关键字
</a></li><li class="dropdown-subitem"><a href="/blog/article/js-basic/关键字/async &amp; await.html" class="nav-link">
  async &amp; await
</a></li><li class="dropdown-subitem"><a href="/blog/article/js-basic/关键字/new.html" class="nav-link">
  new
</a></li><li class="dropdown-subitem"><a href="/blog/article/js-basic/关键字/yield.html" class="nav-link">
  yield
</a></li></ul></li><li class="dropdown-item"><h4>
          常用内置对象
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/article/js-basic/内置对象/Object.html" class="nav-link">
  Object
</a></li><li class="dropdown-subitem"><a href="/blog/article/js-basic/内置对象/Function.html" class="nav-link">
  Function
</a></li><li class="dropdown-subitem"><a href="/blog/article/js-basic/内置对象/GeneratorFunction.html" class="nav-link">
  GeneratorFunction
</a></li><li class="dropdown-subitem"><a href="/blog/article/js-basic/内置对象/Promise.html" class="nav-link">
  Promise
</a></li><li class="dropdown-subitem"><a href="/blog/article/js-basic/内置对象/Reflect.html" class="nav-link">
  Reflect
</a></li><li class="dropdown-subitem"><a href="/blog/article/js-basic/内置对象/Array.html" class="nav-link">
  Array
</a></li><li class="dropdown-subitem"><a href="/blog/article/js-basic/内置对象/Set.html" class="nav-link">
  Set
</a></li><li class="dropdown-subitem"><a href="/blog/article/js-basic/内置对象/Proxy.html" class="nav-link">
  Proxy
</a></li></ul></li><li class="dropdown-item"><h4>
          构造函数-原型-原型链
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/article/js-basic/构造函数-原型-原型链/构造函数.html" class="nav-link">
  构造函数
</a></li><li class="dropdown-subitem"><a href="/blog/article/js-basic/构造函数-原型-原型链/原型.html" class="nav-link">
  原型
</a></li><li class="dropdown-subitem"><a href="/blog/article/js-basic/构造函数-原型-原型链/原型链.html" class="nav-link">
  原型链
</a></li><li class="dropdown-subitem"><a href="/blog/article/js-basic/构造函数-原型-原型链/箭头函数.html" class="nav-link">
  箭头函数
</a></li></ul></li><li class="dropdown-item"><!----> <a href="/blog/article/js-basic/1-4、数组操作.html" class="nav-link">
  数组操作
</a></li><li class="dropdown-item"><!----> <a href="/blog/article/js-basic/深浅拷贝.html" class="nav-link">
  引用类型之深拷贝浅拷贝
</a></li><li class="dropdown-item"><!----> <a href="/blog/article/js-basic/1-6、知识体系.html" class="nav-link">
  知识体系
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Javascript 进阶" class="dropdown-title"><span class="title">Javascript 进阶</span> <span class="arrow down"></span></button> <button type="button" aria-label="Javascript 进阶" class="mobile-dropdown-title"><span class="title">Javascript 进阶</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/article/js-upgrade/模块化/模块化.html" class="nav-link">
  模块化
</a></li><li class="dropdown-item"><h4>
          性能优化
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/article/js-upgrade/性能优化/避免内存泄漏.html" class="nav-link">
  避免内存泄漏
</a></li><li class="dropdown-subitem"><a href="/blog/article/js-upgrade/性能优化/v8垃圾回收机制.html" class="nav-link">
  v8垃圾回收机制
</a></li></ul></li><li class="dropdown-item"><h4>
          编程范式
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/article/js-upgrade/编程范式/编程范式.html" class="nav-link">
  编程范式
</a></li><li class="dropdown-subitem"><a href="/blog/article/js-upgrade/编程范式/面向对象_封装.html" class="nav-link">
  面向对象编程
</a></li><li class="dropdown-subitem"><a href="/blog/article/js-upgrade/编程范式/函数式编程.html" class="nav-link">
  函数式编程
</a></li></ul></li><li class="dropdown-item"><h4>
          编程原则
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/article/js-upgrade/编程原则/编程原则.html" class="nav-link">
  编程原则
</a></li><li class="dropdown-subitem"><a href="/blog/article/js-upgrade/编程原则/Immutable原则.html" class="nav-link">
  Immutable原则
</a></li></ul></li><li class="dropdown-item"><h4>
          设计模式
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/article/js-upgrade/设计模式/什么是设计模式.html" class="nav-link">
  什么是设计模式
</a></li><li class="dropdown-subitem"><a href="/blog/article/js-upgrade/设计模式/访问者模式.html" class="nav-link">
  访问者模式
</a></li></ul></li><li class="dropdown-item"><h4>
          常见算法
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/article/js-upgrade/算法/贪心算法.html" class="nav-link">
  贪心算法
</a></li><li class="dropdown-subitem"><a href="/blog/article/js-upgrade/算法/LRU（least recently used）.html" class="nav-link">
  LRU（least recently used）
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="框架" class="dropdown-title"><span class="title">框架</span> <span class="arrow down"></span></button> <button type="button" aria-label="框架" class="mobile-dropdown-title"><span class="title">框架</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          NestJS
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/article/框架/NestJS/初始NestJS.html" class="nav-link">
  初始NestJS
</a></li><li class="dropdown-subitem"><a href="/blog/article/框架/NestJS/数据库.html" class="nav-link">
  数据库
</a></li></ul></li><li class="dropdown-item"><h4>
          typescript
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/article/框架/typescript/初识TypeScript.html" class="nav-link">
  初识TypeScript
</a></li><li class="dropdown-subitem"><a href="/blog/article/框架/typescript/基本类型.html" class="nav-link">
  基本类型
</a></li><li class="dropdown-subitem"><a href="/blog/article/框架/typescript/进阶类型.html" class="nav-link">
  进阶类型
</a></li><li class="dropdown-subitem"><a href="/blog/article/框架/typescript/最佳实践.html" class="nav-link">
  最佳实践
</a></li></ul></li><li class="dropdown-item"><h4>
          React
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/article/框架/react/基础用法.html" class="nav-link">
  基础用法
</a></li></ul></li><li class="dropdown-item"><h4>
          Vue
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/article/框架/vue/生命周期&amp;执行过程.html" class="nav-link">
  生命周期&amp;执行过程
</a></li><li class="dropdown-subitem"><a href="/blog/article/框架/vue/组件间通信.html" class="nav-link">
  组件间通信
</a></li><li class="dropdown-subitem"><a href="/blog/article/框架/vue/自定义指令.html" class="nav-link">
  自定义指令
</a></li><li class="dropdown-subitem"><a href="/blog/article/框架/vue/手撸ViewModel.html" class="nav-link">
  手撸ViewModel
</a></li><li class="dropdown-subitem"><a href="/blog/article/框架/vue/源码解析/核心源码模块.html" class="nav-link">
  源码解析
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端工程化" class="dropdown-title"><span class="title">前端工程化</span> <span class="arrow down"></span></button> <button type="button" aria-label="前端工程化" class="mobile-dropdown-title"><span class="title">前端工程化</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          持续集成与交付
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/article/前端工程化/CI&amp;CD/CI&amp;CD.html" class="nav-link">
  持续集成与交付
</a></li><li class="dropdown-subitem"><a href="/blog/article/前端工程化/CI&amp;CD/编译打包/编译原理.html" class="nav-link">
  编译打包
</a></li><li class="dropdown-subitem"><a href="/blog/article/前端工程化/CI&amp;CD/自动化测试/自动化测试.html" class="nav-link">
  自动化测试
</a></li></ul></li><li class="dropdown-item"><h4>
          脚手架开发
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/article/前端工程化/脚手架开发/npm原生/npm脚手架开发.html" class="nav-link">
  npm原生
</a></li><li class="dropdown-subitem"><a href="/blog/article/前端工程化/脚手架开发/lerna库/快速上手.html" class="nav-link">
  lerna库
</a></li><li class="dropdown-subitem"><a href="/blog/article/前端工程化/脚手架开发/commander/commander.html" class="nav-link">
  commander管理命令
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="工具代码" class="dropdown-title"><span class="title">工具代码</span> <span class="arrow down"></span></button> <button type="button" aria-label="工具代码" class="mobile-dropdown-title"><span class="title">工具代码</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/article/工具代码/正则.html" class="nav-link">
  正则
</a></li><li class="dropdown-item"><!----> <a href="/blog/article/工具代码/浏览器扩展.html" class="nav-link">
  浏览器扩展
</a></li><li class="dropdown-item"><h4>
          轮子系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/article/工具代码/轮子系列/订阅发布模式.html" class="nav-link">
  订阅发布模式
</a></li><li class="dropdown-subitem"><a href="/blog/article/工具代码/轮子系列/深拷贝.html" class="nav-link">
  深拷贝
</a></li><li class="dropdown-subitem"><a href="/blog/article/工具代码/轮子系列/Promise.html" class="nav-link">
  22行简洁的Promise
</a></li><li class="dropdown-subitem"><a href="/blog/article/工具代码/轮子系列/健壮的Promise.html" class="nav-link">
  健壮的Promise
</a></li><li class="dropdown-subitem"><a href="/blog/article/工具代码/轮子系列/节流and防抖.html" class="nav-link">
  节流and防抖
</a></li><li class="dropdown-subitem"><a href="/blog/article/工具代码/轮子系列/链表.html" class="nav-link">
  链表
</a></li><li class="dropdown-subitem"><a href="/blog/article/工具代码/轮子系列/Immer核心.html" class="nav-link">
  Immer核心
</a></li><li class="dropdown-subitem"><a href="/blog/article/工具代码/轮子系列/手写new.html" class="nav-link">
  手写new
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="web3D" class="dropdown-title"><span class="title">web3D</span> <span class="arrow down"></span></button> <button type="button" aria-label="web3D" class="mobile-dropdown-title"><span class="title">web3D</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/article/web3D/webgl/plan.html" class="nav-link">
  学习计划
</a></li><li class="dropdown-item"><!----> <a href="/blog/article/web3D/webgl/WebGL2_Attr.html" class="nav-link">
  WebGL2 属性
</a></li><li class="dropdown-item"><!----> <a href="/blog/article/web3D/webgl/WebGL2_API.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  WebGL2 API
</a></li><li class="dropdown-item"><!----> <a href="/blog/article/web3D/webgl/WebGL2_Interface.html" class="nav-link">
  WebGL2 接口
</a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="工作台" class="dropdown-title"><span class="title">工作台</span> <span class="arrow down"></span></button> <button type="button" aria-label="工作台" class="mobile-dropdown-title"><span class="title">工作台</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/article/工作台/工作台.html" class="nav-link">
  工作台
</a></li><li class="dropdown-item"><h4>
          未来探索
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/article/未来探索/营销公司.html" class="nav-link">
  营销
</a></li><li class="dropdown-subitem"><a href="/blog/article/未来探索/野外单兵防护.html" class="nav-link">
  野外单兵防护
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="计算机原理" class="dropdown-title"><span class="title">计算机原理</span> <span class="arrow down"></span></button> <button type="button" aria-label="计算机原理" class="mobile-dropdown-title"><span class="title">计算机原理</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/article/计算机原理/CPU结构以及简单运行原理.html" class="nav-link">
  CPU结构以及简单运行原理
</a></li><li class="dropdown-item"><!----> <a href="/blog/article/计算机原理/进程和线程.html" class="nav-link">
  进程和线程
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Javascript 基础" class="dropdown-title"><span class="title">Javascript 基础</span> <span class="arrow down"></span></button> <button type="button" aria-label="Javascript 基础" class="mobile-dropdown-title"><span class="title">Javascript 基础</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/article/js-basic/数据类型.html" class="nav-link">
  数据类型
</a></li><li class="dropdown-item"><h4>
          关键字
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/article/js-basic/关键字/通用关键字.html" class="nav-link">
  通用关键字
</a></li><li class="dropdown-subitem"><a href="/blog/article/js-basic/关键字/async &amp; await.html" class="nav-link">
  async &amp; await
</a></li><li class="dropdown-subitem"><a href="/blog/article/js-basic/关键字/new.html" class="nav-link">
  new
</a></li><li class="dropdown-subitem"><a href="/blog/article/js-basic/关键字/yield.html" class="nav-link">
  yield
</a></li></ul></li><li class="dropdown-item"><h4>
          常用内置对象
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/article/js-basic/内置对象/Object.html" class="nav-link">
  Object
</a></li><li class="dropdown-subitem"><a href="/blog/article/js-basic/内置对象/Function.html" class="nav-link">
  Function
</a></li><li class="dropdown-subitem"><a href="/blog/article/js-basic/内置对象/GeneratorFunction.html" class="nav-link">
  GeneratorFunction
</a></li><li class="dropdown-subitem"><a href="/blog/article/js-basic/内置对象/Promise.html" class="nav-link">
  Promise
</a></li><li class="dropdown-subitem"><a href="/blog/article/js-basic/内置对象/Reflect.html" class="nav-link">
  Reflect
</a></li><li class="dropdown-subitem"><a href="/blog/article/js-basic/内置对象/Array.html" class="nav-link">
  Array
</a></li><li class="dropdown-subitem"><a href="/blog/article/js-basic/内置对象/Set.html" class="nav-link">
  Set
</a></li><li class="dropdown-subitem"><a href="/blog/article/js-basic/内置对象/Proxy.html" class="nav-link">
  Proxy
</a></li></ul></li><li class="dropdown-item"><h4>
          构造函数-原型-原型链
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/article/js-basic/构造函数-原型-原型链/构造函数.html" class="nav-link">
  构造函数
</a></li><li class="dropdown-subitem"><a href="/blog/article/js-basic/构造函数-原型-原型链/原型.html" class="nav-link">
  原型
</a></li><li class="dropdown-subitem"><a href="/blog/article/js-basic/构造函数-原型-原型链/原型链.html" class="nav-link">
  原型链
</a></li><li class="dropdown-subitem"><a href="/blog/article/js-basic/构造函数-原型-原型链/箭头函数.html" class="nav-link">
  箭头函数
</a></li></ul></li><li class="dropdown-item"><!----> <a href="/blog/article/js-basic/1-4、数组操作.html" class="nav-link">
  数组操作
</a></li><li class="dropdown-item"><!----> <a href="/blog/article/js-basic/深浅拷贝.html" class="nav-link">
  引用类型之深拷贝浅拷贝
</a></li><li class="dropdown-item"><!----> <a href="/blog/article/js-basic/1-6、知识体系.html" class="nav-link">
  知识体系
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Javascript 进阶" class="dropdown-title"><span class="title">Javascript 进阶</span> <span class="arrow down"></span></button> <button type="button" aria-label="Javascript 进阶" class="mobile-dropdown-title"><span class="title">Javascript 进阶</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/article/js-upgrade/模块化/模块化.html" class="nav-link">
  模块化
</a></li><li class="dropdown-item"><h4>
          性能优化
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/article/js-upgrade/性能优化/避免内存泄漏.html" class="nav-link">
  避免内存泄漏
</a></li><li class="dropdown-subitem"><a href="/blog/article/js-upgrade/性能优化/v8垃圾回收机制.html" class="nav-link">
  v8垃圾回收机制
</a></li></ul></li><li class="dropdown-item"><h4>
          编程范式
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/article/js-upgrade/编程范式/编程范式.html" class="nav-link">
  编程范式
</a></li><li class="dropdown-subitem"><a href="/blog/article/js-upgrade/编程范式/面向对象_封装.html" class="nav-link">
  面向对象编程
</a></li><li class="dropdown-subitem"><a href="/blog/article/js-upgrade/编程范式/函数式编程.html" class="nav-link">
  函数式编程
</a></li></ul></li><li class="dropdown-item"><h4>
          编程原则
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/article/js-upgrade/编程原则/编程原则.html" class="nav-link">
  编程原则
</a></li><li class="dropdown-subitem"><a href="/blog/article/js-upgrade/编程原则/Immutable原则.html" class="nav-link">
  Immutable原则
</a></li></ul></li><li class="dropdown-item"><h4>
          设计模式
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/article/js-upgrade/设计模式/什么是设计模式.html" class="nav-link">
  什么是设计模式
</a></li><li class="dropdown-subitem"><a href="/blog/article/js-upgrade/设计模式/访问者模式.html" class="nav-link">
  访问者模式
</a></li></ul></li><li class="dropdown-item"><h4>
          常见算法
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/article/js-upgrade/算法/贪心算法.html" class="nav-link">
  贪心算法
</a></li><li class="dropdown-subitem"><a href="/blog/article/js-upgrade/算法/LRU（least recently used）.html" class="nav-link">
  LRU（least recently used）
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="框架" class="dropdown-title"><span class="title">框架</span> <span class="arrow down"></span></button> <button type="button" aria-label="框架" class="mobile-dropdown-title"><span class="title">框架</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          NestJS
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/article/框架/NestJS/初始NestJS.html" class="nav-link">
  初始NestJS
</a></li><li class="dropdown-subitem"><a href="/blog/article/框架/NestJS/数据库.html" class="nav-link">
  数据库
</a></li></ul></li><li class="dropdown-item"><h4>
          typescript
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/article/框架/typescript/初识TypeScript.html" class="nav-link">
  初识TypeScript
</a></li><li class="dropdown-subitem"><a href="/blog/article/框架/typescript/基本类型.html" class="nav-link">
  基本类型
</a></li><li class="dropdown-subitem"><a href="/blog/article/框架/typescript/进阶类型.html" class="nav-link">
  进阶类型
</a></li><li class="dropdown-subitem"><a href="/blog/article/框架/typescript/最佳实践.html" class="nav-link">
  最佳实践
</a></li></ul></li><li class="dropdown-item"><h4>
          React
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/article/框架/react/基础用法.html" class="nav-link">
  基础用法
</a></li></ul></li><li class="dropdown-item"><h4>
          Vue
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/article/框架/vue/生命周期&amp;执行过程.html" class="nav-link">
  生命周期&amp;执行过程
</a></li><li class="dropdown-subitem"><a href="/blog/article/框架/vue/组件间通信.html" class="nav-link">
  组件间通信
</a></li><li class="dropdown-subitem"><a href="/blog/article/框架/vue/自定义指令.html" class="nav-link">
  自定义指令
</a></li><li class="dropdown-subitem"><a href="/blog/article/框架/vue/手撸ViewModel.html" class="nav-link">
  手撸ViewModel
</a></li><li class="dropdown-subitem"><a href="/blog/article/框架/vue/源码解析/核心源码模块.html" class="nav-link">
  源码解析
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端工程化" class="dropdown-title"><span class="title">前端工程化</span> <span class="arrow down"></span></button> <button type="button" aria-label="前端工程化" class="mobile-dropdown-title"><span class="title">前端工程化</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          持续集成与交付
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/article/前端工程化/CI&amp;CD/CI&amp;CD.html" class="nav-link">
  持续集成与交付
</a></li><li class="dropdown-subitem"><a href="/blog/article/前端工程化/CI&amp;CD/编译打包/编译原理.html" class="nav-link">
  编译打包
</a></li><li class="dropdown-subitem"><a href="/blog/article/前端工程化/CI&amp;CD/自动化测试/自动化测试.html" class="nav-link">
  自动化测试
</a></li></ul></li><li class="dropdown-item"><h4>
          脚手架开发
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/article/前端工程化/脚手架开发/npm原生/npm脚手架开发.html" class="nav-link">
  npm原生
</a></li><li class="dropdown-subitem"><a href="/blog/article/前端工程化/脚手架开发/lerna库/快速上手.html" class="nav-link">
  lerna库
</a></li><li class="dropdown-subitem"><a href="/blog/article/前端工程化/脚手架开发/commander/commander.html" class="nav-link">
  commander管理命令
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="工具代码" class="dropdown-title"><span class="title">工具代码</span> <span class="arrow down"></span></button> <button type="button" aria-label="工具代码" class="mobile-dropdown-title"><span class="title">工具代码</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/article/工具代码/正则.html" class="nav-link">
  正则
</a></li><li class="dropdown-item"><!----> <a href="/blog/article/工具代码/浏览器扩展.html" class="nav-link">
  浏览器扩展
</a></li><li class="dropdown-item"><h4>
          轮子系列
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/blog/article/工具代码/轮子系列/订阅发布模式.html" class="nav-link">
  订阅发布模式
</a></li><li class="dropdown-subitem"><a href="/blog/article/工具代码/轮子系列/深拷贝.html" class="nav-link">
  深拷贝
</a></li><li class="dropdown-subitem"><a href="/blog/article/工具代码/轮子系列/Promise.html" class="nav-link">
  22行简洁的Promise
</a></li><li class="dropdown-subitem"><a href="/blog/article/工具代码/轮子系列/健壮的Promise.html" class="nav-link">
  健壮的Promise
</a></li><li class="dropdown-subitem"><a href="/blog/article/工具代码/轮子系列/节流and防抖.html" class="nav-link">
  节流and防抖
</a></li><li class="dropdown-subitem"><a href="/blog/article/工具代码/轮子系列/链表.html" class="nav-link">
  链表
</a></li><li class="dropdown-subitem"><a href="/blog/article/工具代码/轮子系列/Immer核心.html" class="nav-link">
  Immer核心
</a></li><li class="dropdown-subitem"><a href="/blog/article/工具代码/轮子系列/手写new.html" class="nav-link">
  手写new
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="web3D" class="dropdown-title"><span class="title">web3D</span> <span class="arrow down"></span></button> <button type="button" aria-label="web3D" class="mobile-dropdown-title"><span class="title">web3D</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/article/web3D/webgl/plan.html" class="nav-link">
  学习计划
</a></li><li class="dropdown-item"><!----> <a href="/blog/article/web3D/webgl/WebGL2_Attr.html" class="nav-link">
  WebGL2 属性
</a></li><li class="dropdown-item"><!----> <a href="/blog/article/web3D/webgl/WebGL2_API.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  WebGL2 API
</a></li><li class="dropdown-item"><!----> <a href="/blog/article/web3D/webgl/WebGL2_Interface.html" class="nav-link">
  WebGL2 接口
</a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>工作台</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>计算机原理</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Javascript 基础</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Javascript 进阶</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>框架</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>前端工程化</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>工具代码</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>web3D</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/blog/article/web3D/webgl/plan.html" class="sidebar-link">学习计划</a></li><li><a href="/blog/article/web3D/webgl/WebGL2_Attr.html" class="sidebar-link">WebGL2 属性</a></li><li><a href="/blog/article/web3D/webgl/WebGL2_API.html" aria-current="page" class="active sidebar-link">WebGL2 API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/article/web3D/webgl/WebGL2_API.html#viewport" class="sidebar-link">viewport</a></li><li class="sidebar-sub-header"><a href="/blog/article/web3D/webgl/WebGL2_API.html#clearcolor" class="sidebar-link">clearColor</a></li><li class="sidebar-sub-header"><a href="/blog/article/web3D/webgl/WebGL2_API.html#clear" class="sidebar-link">clear</a></li><li class="sidebar-sub-header"><a href="/blog/article/web3D/webgl/WebGL2_API.html#createshader" class="sidebar-link">createShader</a></li><li class="sidebar-sub-header"><a href="/blog/article/web3D/webgl/WebGL2_API.html#shadersource" class="sidebar-link">shaderSource</a></li><li class="sidebar-sub-header"><a href="/blog/article/web3D/webgl/WebGL2_API.html#compileshader" class="sidebar-link">compileShader</a></li><li class="sidebar-sub-header"><a href="/blog/article/web3D/webgl/WebGL2_API.html#createprogram" class="sidebar-link">createProgram</a></li><li class="sidebar-sub-header"><a href="/blog/article/web3D/webgl/WebGL2_API.html#attachshader" class="sidebar-link">attachShader</a></li><li class="sidebar-sub-header"><a href="/blog/article/web3D/webgl/WebGL2_API.html#bindattriblocation" class="sidebar-link">bindAttribLocation</a></li><li class="sidebar-sub-header"><a href="/blog/article/web3D/webgl/WebGL2_API.html#linkprogram" class="sidebar-link">linkProgram</a></li><li class="sidebar-sub-header"><a href="/blog/article/web3D/webgl/WebGL2_API.html#useprogram" class="sidebar-link">useProgram</a></li><li class="sidebar-sub-header"><a href="/blog/article/web3D/webgl/WebGL2_API.html#createbuffer" class="sidebar-link">createBuffer</a></li><li class="sidebar-sub-header"><a href="/blog/article/web3D/webgl/WebGL2_API.html#bindbuffer" class="sidebar-link">bindBuffer</a></li><li class="sidebar-sub-header"><a href="/blog/article/web3D/webgl/WebGL2_API.html#bufferdata" class="sidebar-link">bufferData</a></li><li class="sidebar-sub-header"><a href="/blog/article/web3D/webgl/WebGL2_API.html#enablevertexattribarray" class="sidebar-link">enableVertexAttribArray</a></li><li class="sidebar-sub-header"><a href="/blog/article/web3D/webgl/WebGL2_API.html#vertexattribpointer" class="sidebar-link">vertexAttribPointer</a></li><li class="sidebar-sub-header"><a href="/blog/article/web3D/webgl/WebGL2_API.html#drawarrays" class="sidebar-link">drawArrays</a></li></ul></li><li><a href="/blog/article/web3D/webgl/WebGL2_Interface.html" class="sidebar-link">WebGL2 接口</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="webgl2-api"><a href="#webgl2-api" class="header-anchor">#</a> WebGL2 API</h1> <div class="custom-block warning"><p class="custom-block-title">注意：</p> <p>只适用于 webgl2 <br>
参数用 <code>&lt;&gt;</code> 包裹代表必填，<code>[]</code> 包裹代表选填</p> <p>类型对照表:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// unsigned：无符号；signed：带签名</span>

unsigned long  GLenum<span class="token punctuation">;</span> <span class="token comment">// unsigned 长整形</span>
boolean        GLboolean<span class="token punctuation">;</span> <span class="token comment">// signed 布尔型</span>
unsigned long  GLbitfield<span class="token punctuation">;</span> <span class="token comment">// unsigned 长整形</span>
byte           GLbyte<span class="token punctuation">;</span> <span class="token comment">// signed 8位字节类型</span>
short          GLshort<span class="token punctuation">;</span> <span class="token comment">// signed 16位字节类型</span>
long           GLint<span class="token punctuation">;</span> <span class="token comment">// signed 整形</span>
long           GLsizei<span class="token punctuation">;</span> <span class="token comment">// signed 整形</span>
long long      GLintptr<span class="token punctuation">;</span> <span class="token comment">// signed 长整形</span>
long long      GLsizeiptr<span class="token punctuation">;</span> <span class="token comment">// signed 长整形</span>
unsigned byte  GLubyte<span class="token punctuation">;</span> <span class="token comment">// unsigned 8位字节类型</span>
unsigned short GLushort<span class="token punctuation">;</span> <span class="token comment">// unsigned 16位字节类型</span>
unsigned long  GLuint<span class="token punctuation">;</span> <span class="token comment">// unsigned 长整形</span>
float          GLfloat<span class="token punctuation">;</span> <span class="token comment">// signed 浮点型 x.x</span>
float          GLclampf<span class="token punctuation">;</span> <span class="token comment">// signed 浮点型 x.x</span>
</code></pre></div></div> <h2 id="viewport"><a href="#viewport" class="header-anchor">#</a> viewport</h2> <blockquote><p>设置 webgl 视口</p></blockquote> <h4 id="用法-gl-viewport-px-py-width-height"><a href="#用法-gl-viewport-px-py-width-height" class="header-anchor">#</a> 用法：gl.viewport(<code>&lt;Px&gt;</code>, <code>&lt;Py&gt;</code>, <code>&lt;width&gt;</code>, <code>&lt;height&gt;</code>)</h4> <h4 id="参数"><a href="#参数" class="header-anchor">#</a> 参数：</h4> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th></tr></thead> <tbody><tr><td>Px</td> <td>视口的 x 轴坐标 (坐标 0 点在 canvas 标签的左上角)</td> <td>GLint</td></tr> <tr><td>Py</td> <td>视口的 y 轴坐标 (坐标 0 点在 canvas 标签的左上角)</td> <td>GLint</td></tr> <tr><td>width</td> <td>视口的宽度</td> <td>GLsizei</td></tr> <tr><td>height</td> <td>视口的高度</td> <td>GLsizei</td></tr></tbody></table> <h4 id="返回值-void"><a href="#返回值-void" class="header-anchor">#</a> 返回值: void</h4> <h4 id="示例"><a href="#示例" class="header-anchor">#</a> 示例：</h4> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> canvas <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;canvas&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> gl <span class="token operator">=</span> canvas<span class="token punctuation">.</span><span class="token function">getContext</span><span class="token punctuation">(</span><span class="token string">&quot;webgl&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 创建视口(从左上角0，0处创建视口，宽度、高度等同实际缓冲区的宽高)</span>
gl<span class="token punctuation">.</span><span class="token function">viewport</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> gl<span class="token punctuation">.</span>drawingBufferWidth<span class="token punctuation">,</span> gl<span class="token punctuation">.</span>drawingBufferHeight<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="clearcolor"><a href="#clearcolor" class="header-anchor">#</a> clearColor</h2> <blockquote><p>将指定颜色设置到颜色缓冲区</p></blockquote> <h4 id="用法-gl-clearcolor-r-g-b-alpha"><a href="#用法-gl-clearcolor-r-g-b-alpha" class="header-anchor">#</a> 用法：gl.clearColor(<code>&lt;r&gt;</code>, <code>&lt;g&gt;</code>, <code>&lt;b&gt;</code>, <code>&lt;alpha&gt;</code>)</h4> <h4 id="参数-2"><a href="#参数-2" class="header-anchor">#</a> 参数：</h4> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th></tr></thead> <tbody><tr><td>r</td> <td>红色色值，最大 1，最小 0，用（颜色值/255 计算即可得出）</td> <td>GLclampf</td></tr> <tr><td>g</td> <td>绿色色值，最大 1，最小 0，用（颜色值/255 计算即可得出）</td> <td>GLclampf</td></tr> <tr><td>b</td> <td>蓝色色值，最大 1，最小 0，用（颜色值/255 计算即可得出）</td> <td>GLclampf</td></tr> <tr><td>alpha</td> <td>透明度，最大 1，最小 0</td> <td>GLclampf</td></tr></tbody></table> <h4 id="返回值-void-2"><a href="#返回值-void-2" class="header-anchor">#</a> 返回值: void</h4> <h4 id="示例-2"><a href="#示例-2" class="header-anchor">#</a> 示例：</h4> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> canvas <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;canvas&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> gl <span class="token operator">=</span> canvas<span class="token punctuation">.</span><span class="token function">getContext</span><span class="token punctuation">(</span><span class="token string">&quot;webgl&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 创建视口(从左上角0，0处创建视口，宽度、高度等同实际缓冲区的宽高)</span>
gl<span class="token punctuation">.</span><span class="token function">viewport</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> gl<span class="token punctuation">.</span>drawingBufferWidth<span class="token punctuation">,</span> gl<span class="token punctuation">.</span>drawingBufferHeight<span class="token punctuation">)</span><span class="token punctuation">;</span>
gl<span class="token punctuation">.</span><span class="token function">clearColor</span><span class="token punctuation">(</span><span class="token number">1.0</span><span class="token punctuation">,</span> <span class="token number">0.0</span><span class="token punctuation">,</span> <span class="token number">0.0</span><span class="token punctuation">,</span> <span class="token number">1.0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
gl<span class="token punctuation">.</span><span class="token function">clear</span><span class="token punctuation">(</span>gl<span class="token punctuation">.</span><span class="token constant">COLOR_BUFFER_BIT</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="clear"><a href="#clear" class="header-anchor">#</a> clear</h2> <blockquote><p>将视口背景色清成缓冲区的数据</p></blockquote> <h4 id="用法-gl-clear-mask"><a href="#用法-gl-clear-mask" class="header-anchor">#</a> 用法：gl.clear(&lt;<code>mask</code>)</h4> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th></tr></thead> <tbody><tr><td>mask</td> <td>这里使用<a href="/blog/article/web3D/webgl/WebGL2_Attr.html#clearbuffermask">gl.COLOR_BUFFER_BIT</a></td> <td>GLenum</td></tr></tbody></table> <h4 id="返回值-void-3"><a href="#返回值-void-3" class="header-anchor">#</a> 返回值: void</h4> <h4 id="示例-3"><a href="#示例-3" class="header-anchor">#</a> 示例：</h4> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> canvas <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;canvas&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> gl <span class="token operator">=</span> canvas<span class="token punctuation">.</span><span class="token function">getContext</span><span class="token punctuation">(</span><span class="token string">&quot;webgl&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 创建视口(从左上角0，0处创建视口，宽度、高度等同实际缓冲区的宽高)</span>
gl<span class="token punctuation">.</span><span class="token function">viewport</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> gl<span class="token punctuation">.</span>drawingBufferWidth<span class="token punctuation">,</span> gl<span class="token punctuation">.</span>drawingBufferHeight<span class="token punctuation">)</span><span class="token punctuation">;</span>
gl<span class="token punctuation">.</span><span class="token function">clearColor</span><span class="token punctuation">(</span><span class="token number">1.0</span><span class="token punctuation">,</span> <span class="token number">0.0</span><span class="token punctuation">,</span> <span class="token number">0.0</span><span class="token punctuation">,</span> <span class="token number">1.0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
gl<span class="token punctuation">.</span><span class="token function">clear</span><span class="token punctuation">(</span>gl<span class="token punctuation">.</span><span class="token constant">COLOR_BUFFER_BIT</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="createshader"><a href="#createshader" class="header-anchor">#</a> createShader</h2> <blockquote><p>创建着色器</p></blockquote> <h4 id="用法-gl-createshader-type"><a href="#用法-gl-createshader-type" class="header-anchor">#</a> 用法：gl.createShader(&lt;<code>type</code>&gt;)</h4> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th></tr></thead> <tbody><tr><td>type</td> <td>这里使用<a href="/blog/article/web3D/webgl/WebGL2_Attr.html#shaders">Shaders 里任意一个</a></td> <td>GLenum</td></tr></tbody></table> <h4 id="返回值-webglshader"><a href="#返回值-webglshader" class="header-anchor">#</a> 返回值: <a href="/blog/article/web3D/webgl/WebGL2_Interface.html#webglshader">WebGLShader</a></h4> <h4 id="示例-4"><a href="#示例-4" class="header-anchor">#</a> 示例：</h4> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token comment">// 顶点着色器代码</span>
<span class="token keyword">const</span> codeVs <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
        attribute vec3 v3Position;
        void main(void){
          gl_Position = vec4(v3Position, 1.0);
        }
      </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>

<span class="token comment">// 片元着色器代码</span>
<span class="token keyword">const</span> codeFs <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
      void main(void){
        gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
      }
    </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
<span class="token keyword">const</span> canvas <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;webgl&quot;</span><span class="token punctuation">)</span> <span class="token keyword">as</span> HTMLCanvasElement<span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token keyword">const</span> gl <span class="token operator">=</span> canvas<span class="token punctuation">.</span><span class="token function">getContext</span><span class="token punctuation">(</span><span class="token string">&quot;webgl&quot;</span><span class="token punctuation">)</span> <span class="token keyword">as</span> WebGLRenderingContext<span class="token punctuation">;</span>
<span class="token keyword">const</span> shaderVs <span class="token operator">=</span> gl<span class="token punctuation">.</span><span class="token function">createShader</span><span class="token punctuation">(</span>gl<span class="token punctuation">.</span><span class="token constant">VERTEX_SHADER</span><span class="token punctuation">)</span> <span class="token keyword">as</span> WebGLShader<span class="token punctuation">;</span>
<span class="token keyword">const</span> shaderFs <span class="token operator">=</span> gl<span class="token punctuation">.</span><span class="token function">createShader</span><span class="token punctuation">(</span>gl<span class="token punctuation">.</span><span class="token constant">FRAGMENT_SHADER</span><span class="token punctuation">)</span> <span class="token keyword">as</span> WebGLShader<span class="token punctuation">;</span>

<span class="token comment">// 解析 shader 代码</span>
gl<span class="token punctuation">.</span><span class="token function">shaderSource</span><span class="token punctuation">(</span>shaderVs<span class="token punctuation">,</span> codeVs<span class="token punctuation">)</span><span class="token punctuation">;</span>
gl<span class="token punctuation">.</span><span class="token function">shaderSource</span><span class="token punctuation">(</span>shaderFs<span class="token punctuation">,</span> codeFs<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// ...</span>
</code></pre></div><h2 id="shadersource"><a href="#shadersource" class="header-anchor">#</a> shaderSource</h2> <blockquote><p>导入着色器代码</p></blockquote> <h4 id="用法-gl-shadersource-shader-code"><a href="#用法-gl-shadersource-shader-code" class="header-anchor">#</a> 用法：gl.shaderSource(&lt;<code>shader</code>&gt;,<code>&lt;code&gt;</code>)</h4> <h4 id="参数-3"><a href="#参数-3" class="header-anchor">#</a> 参数：</h4> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th></tr></thead> <tbody><tr><td>shader</td> <td><a href="/blog/article/web3D/webgl/WebGL2_Interface.html#webglshader">WebGLShader</a></td> <td>interface</td></tr> <tr><td>code</td> <td>着色器代码</td> <td>string</td></tr></tbody></table> <h4 id="返回值-void-4"><a href="#返回值-void-4" class="header-anchor">#</a> 返回值: void</h4> <h4 id="示例-5"><a href="#示例-5" class="header-anchor">#</a> 示例：</h4> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token comment">// 顶点着色器代码</span>
<span class="token keyword">const</span> codeVs <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
        attribute vec3 v3Position;
        void main(void){
          gl_Position = vec4(v3Position, 1.0);
        }
      </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>

<span class="token comment">// 片元着色器代码</span>
<span class="token keyword">const</span> codeFs <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
      void main(void){
        gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
      }
    </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
<span class="token keyword">const</span> canvas <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;webgl&quot;</span><span class="token punctuation">)</span> <span class="token keyword">as</span> HTMLCanvasElement<span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token keyword">const</span> gl <span class="token operator">=</span> canvas<span class="token punctuation">.</span><span class="token function">getContext</span><span class="token punctuation">(</span><span class="token string">&quot;webgl&quot;</span><span class="token punctuation">)</span> <span class="token keyword">as</span> WebGLRenderingContext<span class="token punctuation">;</span>
<span class="token keyword">const</span> shaderVs <span class="token operator">=</span> gl<span class="token punctuation">.</span><span class="token function">createShader</span><span class="token punctuation">(</span>gl<span class="token punctuation">.</span><span class="token constant">VERTEX_SHADER</span><span class="token punctuation">)</span> <span class="token keyword">as</span> WebGLShader<span class="token punctuation">;</span>
<span class="token keyword">const</span> shaderFs <span class="token operator">=</span> gl<span class="token punctuation">.</span><span class="token function">createShader</span><span class="token punctuation">(</span>gl<span class="token punctuation">.</span><span class="token constant">FRAGMENT_SHADER</span><span class="token punctuation">)</span> <span class="token keyword">as</span> WebGLShader<span class="token punctuation">;</span>

<span class="token comment">// 解析 shader 代码</span>
gl<span class="token punctuation">.</span><span class="token function">shaderSource</span><span class="token punctuation">(</span>shaderVs<span class="token punctuation">,</span> codeVs<span class="token punctuation">)</span><span class="token punctuation">;</span>
gl<span class="token punctuation">.</span><span class="token function">shaderSource</span><span class="token punctuation">(</span>shaderFs<span class="token punctuation">,</span> codeFs<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// ...</span>
</code></pre></div><h2 id="compileshader"><a href="#compileshader" class="header-anchor">#</a> compileShader</h2> <blockquote><p>预编译着色器代码</p></blockquote> <h4 id="用法-gl-compileshader-shader"><a href="#用法-gl-compileshader-shader" class="header-anchor">#</a> 用法：gl.compileShader(&lt;<code>shader</code>&gt;)</h4> <h4 id="参数-4"><a href="#参数-4" class="header-anchor">#</a> 参数：</h4> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th></tr></thead> <tbody><tr><td>shader</td> <td><a href="/blog/article/web3D/webgl/WebGL2_Interface.html#webglshader">WebGLShader</a></td> <td>interface</td></tr></tbody></table> <h4 id="返回值-void-5"><a href="#返回值-void-5" class="header-anchor">#</a> 返回值: void</h4> <h4 id="示例-6"><a href="#示例-6" class="header-anchor">#</a> 示例：</h4> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token comment">// ...</span>
<span class="token comment">// 解析 shader 代码</span>
gl<span class="token punctuation">.</span><span class="token function">shaderSource</span><span class="token punctuation">(</span>shaderVs<span class="token punctuation">,</span> codeVs<span class="token punctuation">)</span><span class="token punctuation">;</span>
gl<span class="token punctuation">.</span><span class="token function">shaderSource</span><span class="token punctuation">(</span>shaderFs<span class="token punctuation">,</span> codeFs<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 编译着色器</span>
gl<span class="token punctuation">.</span><span class="token function">compileShader</span><span class="token punctuation">(</span>shaderVs<span class="token punctuation">)</span><span class="token punctuation">;</span>
gl<span class="token punctuation">.</span><span class="token function">compileShader</span><span class="token punctuation">(</span>shaderFs<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// ...</span>
</code></pre></div><h2 id="createprogram"><a href="#createprogram" class="header-anchor">#</a> createProgram</h2> <blockquote><p>创建 webgl 工程</p></blockquote> <h4 id="用法-gl-createprogram"><a href="#用法-gl-createprogram" class="header-anchor">#</a> 用法：gl.createProgram()</h4> <h4 id="返回值-webglprogram"><a href="#返回值-webglprogram" class="header-anchor">#</a> 返回值: <a href="/blog/article/web3D/webgl/WebGL2_Interface.html#webglprogram">WebGLProgram</a></h4> <h4 id="示例-7"><a href="#示例-7" class="header-anchor">#</a> 示例：</h4> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token comment">// ...</span>
<span class="token comment">// 创建工程</span>
<span class="token keyword">const</span> glProgram <span class="token operator">=</span> gl<span class="token punctuation">.</span><span class="token function">createProgram</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword">as</span> WebGLProgram<span class="token punctuation">;</span>
<span class="token comment">// ...</span>
</code></pre></div><h2 id="attachshader"><a href="#attachshader" class="header-anchor">#</a> attachShader</h2> <blockquote><p>将着色器对象 attach 到 Program 上</p></blockquote> <h4 id="用法-gl-attachshader-program-shader"><a href="#用法-gl-attachshader-program-shader" class="header-anchor">#</a> 用法：gl.attachShader(&lt;<code>program</code>&gt;, &lt;<code>shader</code>&gt;)</h4> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th></tr></thead> <tbody><tr><td>program</td> <td><a href="/blog/article/web3D/webgl/WebGL2_Interface.html#webglprogram">WebGLProgram</a></td> <td>interface</td></tr> <tr><td>shader</td> <td><a href="/blog/article/web3D/webgl/WebGL2_Interface.html#webglshader">WebGLShader</a></td> <td>interface</td></tr></tbody></table> <h4 id="返回值-void-6"><a href="#返回值-void-6" class="header-anchor">#</a> 返回值: void</h4> <h4 id="示例-8"><a href="#示例-8" class="header-anchor">#</a> 示例：</h4> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token comment">// ...</span>
<span class="token comment">// 创建工程</span>
<span class="token keyword">const</span> glProgram <span class="token operator">=</span> gl<span class="token punctuation">.</span><span class="token function">createProgram</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword">as</span> WebGLProgram<span class="token punctuation">;</span>

<span class="token comment">// 贴着色器</span>
gl<span class="token punctuation">.</span><span class="token function">attachShader</span><span class="token punctuation">(</span>glProgram<span class="token punctuation">,</span> shaderVs<span class="token punctuation">)</span><span class="token punctuation">;</span>
gl<span class="token punctuation">.</span><span class="token function">attachShader</span><span class="token punctuation">(</span>glProgram<span class="token punctuation">,</span> shaderFs<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// ...</span>
</code></pre></div><h2 id="bindattriblocation"><a href="#bindattriblocation" class="header-anchor">#</a> bindAttribLocation</h2> <blockquote><p>将索引值 index，关联上着色器代码里的对应的变量（请看示例的顶点着色器代码）</p></blockquote> <h4 id="用法-gl-bindattriblocation-webglprogram-index-name"><a href="#用法-gl-bindattriblocation-webglprogram-index-name" class="header-anchor">#</a> 用法：gl.bindAttribLocation(&lt;<code>WebGLProgram</code>&gt;, &lt;<code>index</code>&gt;, &lt;<code>name</code>&gt;)</h4> <h4 id="参数-5"><a href="#参数-5" class="header-anchor">#</a> 参数：</h4> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th></tr></thead> <tbody><tr><td><a href="/blog/article/web3D/webgl/WebGL2_Interface.html#webglprogram">WebGLProgram</a></td> <td>指定工程</td> <td>interface</td></tr> <tr><td>index</td> <td>变量索引值，对应着色器代码里的变量</td> <td>GLuint</td></tr> <tr><td>name</td> <td>变量名称，对应着色器代码里变量的名称</td> <td>string</td></tr></tbody></table> <h4 id="返回值-void-7"><a href="#返回值-void-7" class="header-anchor">#</a> 返回值: void</h4> <h4 id="示例-9"><a href="#示例-9" class="header-anchor">#</a> 示例：</h4> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token comment">// ...</span>
<span class="token comment">// 顶点着色器代码</span>
<span class="token keyword">const</span> codeVs <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
        attribute vec3 v3Position; // 注意：这里 v3Position 必须和 bindAttribLocation 传入的name一致，然后会被指向一个索引值，以便后续方法使用
        void main(void){
          gl_Position = vec4(v3Position, 1.0);
        }
      </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
<span class="token comment">// ...</span>
<span class="token comment">// 创建工程</span>
<span class="token keyword">const</span> glProgram <span class="token operator">=</span> gl<span class="token punctuation">.</span><span class="token function">createProgram</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword">as</span> WebGLProgram<span class="token punctuation">;</span>

<span class="token comment">// 贴着色器</span>
gl<span class="token punctuation">.</span><span class="token function">attachShader</span><span class="token punctuation">(</span>glProgram<span class="token punctuation">,</span> shaderVs<span class="token punctuation">)</span><span class="token punctuation">;</span>
gl<span class="token punctuation">.</span><span class="token function">attachShader</span><span class="token punctuation">(</span>glProgram<span class="token punctuation">,</span> shaderFs<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 绑定本地属性信息</span>
gl<span class="token punctuation">.</span><span class="token function">bindAttribLocation</span><span class="token punctuation">(</span>glProgram<span class="token punctuation">,</span> v3PositionIndex<span class="token punctuation">,</span> <span class="token string">&quot;v3Position&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// ...</span>
</code></pre></div><h2 id="linkprogram"><a href="#linkprogram" class="header-anchor">#</a> linkProgram</h2> <blockquote><p>链接工程</p></blockquote> <h4 id="用法-gl-linkprogram-webglprogram"><a href="#用法-gl-linkprogram-webglprogram" class="header-anchor">#</a> 用法：gl.linkProgram(&lt;<code>WebGLProgram</code>&gt;)</h4> <h4 id="参数-6"><a href="#参数-6" class="header-anchor">#</a> 参数：</h4> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th></tr></thead> <tbody><tr><td><a href="/blog/article/web3D/webgl/WebGL2_Interface.html#webglprogram">WebGLProgram</a></td> <td>指定工程</td> <td>interface</td></tr></tbody></table> <h4 id="返回值-void-8"><a href="#返回值-void-8" class="header-anchor">#</a> 返回值: void</h4> <h4 id="示例-10"><a href="#示例-10" class="header-anchor">#</a> 示例：</h4> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token comment">// ...</span>
<span class="token comment">// 创建工程</span>
<span class="token keyword">const</span> glProgram <span class="token operator">=</span> gl<span class="token punctuation">.</span><span class="token function">createProgram</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword">as</span> WebGLProgram<span class="token punctuation">;</span>

<span class="token comment">// 贴着色器</span>
gl<span class="token punctuation">.</span><span class="token function">attachShader</span><span class="token punctuation">(</span>glProgram<span class="token punctuation">,</span> shaderVs<span class="token punctuation">)</span><span class="token punctuation">;</span>
gl<span class="token punctuation">.</span><span class="token function">attachShader</span><span class="token punctuation">(</span>glProgram<span class="token punctuation">,</span> shaderFs<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 绑定本地属性信息</span>
gl<span class="token punctuation">.</span><span class="token function">bindAttribLocation</span><span class="token punctuation">(</span>glProgram<span class="token punctuation">,</span> v3PositionIndex<span class="token punctuation">,</span> <span class="token string">&quot;v3Position&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 链接工程</span>
gl<span class="token punctuation">.</span><span class="token function">linkProgram</span><span class="token punctuation">(</span>glProgram<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// ...</span>
</code></pre></div><h2 id="useprogram"><a href="#useprogram" class="header-anchor">#</a> useProgram</h2> <blockquote><p>使用工程</p></blockquote> <h4 id="用法-gl-useprogram-webglprogram"><a href="#用法-gl-useprogram-webglprogram" class="header-anchor">#</a> 用法：gl.useProgram(&lt;<code>WebGLProgram</code>&gt;)</h4> <h4 id="参数-7"><a href="#参数-7" class="header-anchor">#</a> 参数：</h4> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th></tr></thead> <tbody><tr><td><a href="/blog/article/web3D/webgl/WebGL2_Interface.html#webglprogram">WebGLProgram</a></td> <td>指定工程</td> <td>interface</td></tr></tbody></table> <h4 id="返回值-void-9"><a href="#返回值-void-9" class="header-anchor">#</a> 返回值: void</h4> <h4 id="示例-11"><a href="#示例-11" class="header-anchor">#</a> 示例：</h4> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token comment">// ...</span>
<span class="token comment">// 创建工程</span>
<span class="token keyword">const</span> glProgram <span class="token operator">=</span> gl<span class="token punctuation">.</span><span class="token function">createProgram</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword">as</span> WebGLProgram<span class="token punctuation">;</span>

<span class="token comment">// 贴着色器</span>
gl<span class="token punctuation">.</span><span class="token function">attachShader</span><span class="token punctuation">(</span>glProgram<span class="token punctuation">,</span> shaderVs<span class="token punctuation">)</span><span class="token punctuation">;</span>
gl<span class="token punctuation">.</span><span class="token function">attachShader</span><span class="token punctuation">(</span>glProgram<span class="token punctuation">,</span> shaderFs<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 绑定本地属性信息</span>
gl<span class="token punctuation">.</span><span class="token function">bindAttribLocation</span><span class="token punctuation">(</span>glProgram<span class="token punctuation">,</span> v3PositionIndex<span class="token punctuation">,</span> <span class="token string">&quot;v3Position&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 链接工程</span>
gl<span class="token punctuation">.</span><span class="token function">linkProgram</span><span class="token punctuation">(</span>glProgram<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 使用工程</span>
gl<span class="token punctuation">.</span><span class="token function">useProgram</span><span class="token punctuation">(</span>glProgram<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// ...</span>
</code></pre></div><h2 id="createbuffer"><a href="#createbuffer" class="header-anchor">#</a> createBuffer</h2> <blockquote><p>创建 webgl 缓冲区</p></blockquote> <h4 id="用法-gl-createbuffer-webglbuffer"><a href="#用法-gl-createbuffer-webglbuffer" class="header-anchor">#</a> 用法：gl.createBuffer(&lt;<code>WebGLBuffer</code>&gt;)</h4> <h4 id="参数-8"><a href="#参数-8" class="header-anchor">#</a> 参数：</h4> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th></tr></thead> <tbody><tr><td><a href="/blog/article/web3D/webgl/WebGL2_Interface.html#webglbuffer">WebGLBuffer</a></td> <td>创建缓冲区</td> <td>interface</td></tr></tbody></table> <h4 id="返回值-void-10"><a href="#返回值-void-10" class="header-anchor">#</a> 返回值: void</h4> <h4 id="示例-12"><a href="#示例-12" class="header-anchor">#</a> 示例：</h4> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token comment">// ...</span>
<span class="token keyword">const</span> glBuffer <span class="token operator">=</span> gl<span class="token punctuation">.</span><span class="token function">createBuffer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// ...</span>
</code></pre></div><h2 id="bindbuffer"><a href="#bindbuffer" class="header-anchor">#</a> bindBuffer</h2> <blockquote><p>绑定缓冲区</p></blockquote> <h4 id="用法-gl-bindbuffer-target-webglbuffer"><a href="#用法-gl-bindbuffer-target-webglbuffer" class="header-anchor">#</a> 用法：gl.bindBuffer(&lt;<code>target</code>&gt;, &lt;<code>WebGLBuffer</code>&gt;)</h4> <h4 id="参数-9"><a href="#参数-9" class="header-anchor">#</a> 参数：</h4> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th></tr></thead> <tbody><tr><td>target</td> <td>这里使用 <a href="/blog/article/web3D/webgl/WebGL2_Attr.html#bufferobjects">gl.ARRAY_BUFFER</a></td> <td>interface</td></tr> <tr><td><a href="/blog/article/web3D/webgl/WebGL2_Interface.html#webglbuffer">WebGLBuffer</a></td> <td></td> <td>interface</td></tr></tbody></table> <h4 id="返回值-void-11"><a href="#返回值-void-11" class="header-anchor">#</a> 返回值: void</h4> <h4 id="示例-13"><a href="#示例-13" class="header-anchor">#</a> 示例：</h4> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token comment">// ...</span>
<span class="token keyword">const</span> glBuffer <span class="token operator">=</span> gl<span class="token punctuation">.</span><span class="token function">createBuffer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

gl<span class="token punctuation">.</span><span class="token function">bindBuffer</span><span class="token punctuation">(</span>gl<span class="token punctuation">.</span><span class="token constant">ARRAY_BUFFER</span><span class="token punctuation">,</span> glBuffer<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// ...</span>
</code></pre></div><h2 id="bufferdata"><a href="#bufferdata" class="header-anchor">#</a> bufferData</h2> <blockquote><p>绑定缓冲区</p></blockquote> <h4 id="用法-gl-bufferdata-target-data-usage"><a href="#用法-gl-bufferdata-target-data-usage" class="header-anchor">#</a> 用法：gl.bufferData(&lt;<code>target</code>&gt;, &lt;<code>data</code>&gt;, &lt;<code>usage</code>&gt;)</h4> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th></tr></thead> <tbody><tr><td>target</td> <td>这里使用<a href="/blog/article/web3D/webgl/WebGL2_Attr.html#bufferobjects">gl.ARRAY_BUFFER</a></td> <td>GLenum</td></tr> <tr><td>data</td> <td>顶点坐标数据，由 js 小数数组转换而来</td> <td>Float32Array</td></tr> <tr><td>usage</td> <td>这里使用<a href="/blog/article/web3D/webgl/WebGL2_Attr.html#bufferobjects">gl.STATIC_DRAW</a></td> <td>GLenum</td></tr></tbody></table> <h4 id="返回值-void-12"><a href="#返回值-void-12" class="header-anchor">#</a> 返回值: void</h4> <h4 id="示例-14"><a href="#示例-14" class="header-anchor">#</a> 示例：</h4> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token comment">// ...</span>
<span class="token comment">// 声明数据</span>
<span class="token keyword">const</span> bufferData <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">0.0</span><span class="token punctuation">,</span> <span class="token number">1.0</span><span class="token punctuation">,</span> <span class="token number">0.0</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">1.0</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">1.0</span><span class="token punctuation">,</span> <span class="token number">0.0</span><span class="token punctuation">,</span> <span class="token number">1.0</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">1.0</span><span class="token punctuation">,</span> <span class="token number">0.0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token comment">// [  x      y      z     nx    ny    nz (n代表法线)</span>
<span class="token comment">//   0.0,   1.0,   0.0,  0.0,  0.0,  0.0,</span>
<span class="token comment">//   -1.0,  -1.0,  0.0,  0.0,  0.0,  0.0,</span>
<span class="token comment">//   1.0,   -1.0,  0.0,  0.0,  0.0,  0.0,</span>
<span class="token comment">// ]</span>

<span class="token keyword">const</span> glBuffer <span class="token operator">=</span> gl<span class="token punctuation">.</span><span class="token function">createBuffer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

gl<span class="token punctuation">.</span><span class="token function">bindBuffer</span><span class="token punctuation">(</span>gl<span class="token punctuation">.</span><span class="token constant">ARRAY_BUFFER</span><span class="token punctuation">,</span> glBuffer<span class="token punctuation">)</span><span class="token punctuation">;</span>

gl<span class="token punctuation">.</span><span class="token function">bufferData</span><span class="token punctuation">(</span>gl<span class="token punctuation">.</span><span class="token constant">ARRAY_BUFFER</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Float32Array</span><span class="token punctuation">(</span>bufferData<span class="token punctuation">)</span><span class="token punctuation">,</span> gl<span class="token punctuation">.</span><span class="token constant">STATIC_DRAW</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// ...</span>
</code></pre></div><h2 id="enablevertexattribarray"><a href="#enablevertexattribarray" class="header-anchor">#</a> enableVertexAttribArray</h2> <blockquote><p>启用顶点缓冲区，并设置索引对应的变量</p></blockquote> <h4 id="用法-gl-enablevertexattribarray-index"><a href="#用法-gl-enablevertexattribarray-index" class="header-anchor">#</a> 用法：gl.enableVertexAttribArray(&lt;<code>index</code>&gt;)</h4> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th></tr></thead> <tbody><tr><td>index</td> <td>变量索引值，对应着色器代码里的变量</td> <td>GLuint</td></tr></tbody></table> <h4 id="返回值-void-13"><a href="#返回值-void-13" class="header-anchor">#</a> 返回值: void</h4> <h4 id="示例-15"><a href="#示例-15" class="header-anchor">#</a> 示例：</h4> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">const</span> v3PositionIndex <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token comment">// ...</span>

<span class="token comment">// 绑定本地属性信息</span>
gl<span class="token punctuation">.</span><span class="token function">bindAttribLocation</span><span class="token punctuation">(</span>glProgram<span class="token punctuation">,</span> v3PositionIndex<span class="token punctuation">,</span> <span class="token string">&quot;v3Position&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// ...</span>

<span class="token comment">// 根据索引，启用对应的顶点缓冲区</span>
gl<span class="token punctuation">.</span><span class="token function">enableVertexAttribArray</span><span class="token punctuation">(</span>v3PositionIndex<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// ...</span>
</code></pre></div><h2 id="vertexattribpointer"><a href="#vertexattribpointer" class="header-anchor">#</a> vertexAttribPointer</h2> <blockquote><p>设置变量从缓冲区里读取的规则</p></blockquote> <h4 id="用法-gl-vertexattribpointer-index-size-type-normalized-stride-offset"><a href="#用法-gl-vertexattribpointer-index-size-type-normalized-stride-offset" class="header-anchor">#</a> 用法：gl.vertexAttribPointer(<code>index</code>, <code>size</code>, <code>type</code>, <code>normalized</code>, <code>stride</code>, <code>offset</code>)</h4> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th></tr></thead> <tbody><tr><td>index</td> <td>变量索引值，对应着色器代码里的变量</td> <td>GLuint</td></tr> <tr><td>size</td> <td>表示维度，配合 type=gl.FLOAT，共同组成着色器里的 vec3(vecSize) 类型（正常使用 vec3,然后调整 stride 参数）</td> <td>GLuint</td></tr> <tr><td>type</td> <td>这里使用<a href="/blog/article/web3D/webgl/WebGL2_Attr.html#datatype">gl.FLOAT</a></td> <td>GLuint</td></tr> <tr><td>normalized</td> <td>是否需要规格化，即转为 0 ～ 1 之间的数</td> <td>GLuint</td></tr> <tr><td>stride</td> <td>数据读取间距，值是 byte 型，不是 float 型，所以，如果每次读取 6 条 float 数据，则设置成 4*6</td> <td>GLuint</td></tr> <tr><td>offset</td> <td>偏移量</td> <td>GLuint</td></tr></tbody></table> <h4 id="返回值-void-14"><a href="#返回值-void-14" class="header-anchor">#</a> 返回值: void</h4> <h4 id="示例-16"><a href="#示例-16" class="header-anchor">#</a> 示例：</h4> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token comment">// ...</span>
<span class="token comment">// 声明数据</span>
<span class="token keyword">const</span> bufferData <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">0.0</span><span class="token punctuation">,</span> <span class="token number">1.0</span><span class="token punctuation">,</span> <span class="token number">0.0</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">1.0</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">1.0</span><span class="token punctuation">,</span> <span class="token number">0.0</span><span class="token punctuation">,</span> <span class="token number">1.0</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">1.0</span><span class="token punctuation">,</span> <span class="token number">0.0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token comment">// [  x      y      z</span>
<span class="token comment">//   0.0,   1.0,   0.0,                   // 3条3条地读取数据 gl.vertexAttribPointer(v3PositionIndex, 3, gl.FLOAT, false, 0, 0);</span>
<span class="token comment">//   -1.0,  -1.0,  0.0,</span>
<span class="token comment">//   1.0,   -1.0,  0.0,</span>
<span class="token comment">// ]</span>
<span class="token comment">// [  x      y      z     nx    ny    nz (n代表法线)</span>
<span class="token comment">//   0.0,   1.0,   0.0,  0.0,  0.0,  0.0, // 6条6条地读取数据 gl.vertexAttribPointer(v3PositionIndex, 3, gl.FLOAT, false, 4*6, 0)，</span>
<span class="token comment">//   -1.0,  -1.0,  0.0,  0.0,  0.0,  0.0,</span>
<span class="token comment">//   1.0,   -1.0,  0.0,  0.0,  0.0,  0.0,</span>
<span class="token comment">// ]</span>

<span class="token comment">// ...</span>

<span class="token keyword">const</span> v3PositionIndex <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token comment">// ...</span>

<span class="token comment">// 绑定本地属性信息</span>
gl<span class="token punctuation">.</span><span class="token function">bindAttribLocation</span><span class="token punctuation">(</span>glProgram<span class="token punctuation">,</span> v3PositionIndex<span class="token punctuation">,</span> <span class="token string">&quot;v3Position&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// ...</span>

<span class="token comment">// 根据索引，启用对应的顶点缓冲区</span>
gl<span class="token punctuation">.</span><span class="token function">enableVertexAttribArray</span><span class="token punctuation">(</span>v3PositionIndex<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// ...</span>

<span class="token comment">// 索引0对应的变量，变量每次绘制时，取3条float数据，不将数据规格化，没有偏移</span>
gl<span class="token punctuation">.</span><span class="token function">vertexAttribPointer</span><span class="token punctuation">(</span>v3PositionIndex<span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> gl<span class="token punctuation">.</span><span class="token constant">FLOAT</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// ...</span>
</code></pre></div><h2 id="drawarrays"><a href="#drawarrays" class="header-anchor">#</a> drawArrays</h2> <blockquote><p>设置变量从缓冲区里读取的规则</p></blockquote> <h4 id="用法-gl-drawarrays-mode-first-count"><a href="#用法-gl-drawarrays-mode-first-count" class="header-anchor">#</a> 用法：gl.drawArrays(<code>mode</code>, <code>first</code>, <code>count</code>)</h4> <table><thead><tr><th>参数</th> <th>说明</th> <th>类型</th></tr></thead> <tbody><tr><td>mode</td> <td><a href="/blog/article/web3D/webgl/WebGL2_Attr.html#beginmode">基本图元 BeginMode</a></td> <td>GLenum</td></tr> <tr><td>first</td> <td>从第几个顶点开始</td> <td>GLint</td></tr> <tr><td>count</td> <td>绘制次数</td> <td>GLsizei</td></tr></tbody></table> <h4 id="返回值-void-15"><a href="#返回值-void-15" class="header-anchor">#</a> 返回值: void</h4> <h4 id="示例-17"><a href="#示例-17" class="header-anchor">#</a> 示例：</h4> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token comment">// ...</span>
<span class="token comment">// 声明数据</span>
<span class="token keyword">const</span> bufferData <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">0.0</span><span class="token punctuation">,</span> <span class="token number">1.0</span><span class="token punctuation">,</span> <span class="token number">0.0</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">1.0</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">1.0</span><span class="token punctuation">,</span> <span class="token number">0.0</span><span class="token punctuation">,</span> <span class="token number">1.0</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">1.0</span><span class="token punctuation">,</span> <span class="token number">0.0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token comment">// [  x      y      z</span>
<span class="token comment">//   0.0,   1.0,   0.0,                   // 3条3条地读取数据 gl.vertexAttribPointer(v3PositionIndex, 3, gl.FLOAT, false, 0, 0);</span>
<span class="token comment">//   -1.0,  -1.0,  0.0,</span>
<span class="token comment">//   1.0,   -1.0,  0.0,</span>
<span class="token comment">// ]</span>
<span class="token comment">// [  x      y      z     nx    ny    nz (n代表法线)</span>
<span class="token comment">//   0.0,   1.0,   0.0,  0.0,  0.0,  0.0, // 6条6条地读取数据 gl.vertexAttribPointer(v3PositionIndex, 3, gl.FLOAT, false, 4*6, 0)，</span>
<span class="token comment">//   -1.0,  -1.0,  0.0,  0.0,  0.0,  0.0,</span>
<span class="token comment">//   1.0,   -1.0,  0.0,  0.0,  0.0,  0.0,</span>
<span class="token comment">// ]</span>

<span class="token comment">// ...</span>

<span class="token keyword">const</span> v3PositionIndex <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token comment">// ...</span>

<span class="token comment">// 绑定本地属性信息</span>
gl<span class="token punctuation">.</span><span class="token function">bindAttribLocation</span><span class="token punctuation">(</span>glProgram<span class="token punctuation">,</span> v3PositionIndex<span class="token punctuation">,</span> <span class="token string">&quot;v3Position&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// ...</span>

<span class="token comment">// 根据索引，启用对应的顶点缓冲区</span>
gl<span class="token punctuation">.</span><span class="token function">enableVertexAttribArray</span><span class="token punctuation">(</span>v3PositionIndex<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// ...</span>

<span class="token comment">// 索引0对应的变量，变量每次绘制时，取3条float数据，不将数据规格化，没有偏移</span>
gl<span class="token punctuation">.</span><span class="token function">vertexAttribPointer</span><span class="token punctuation">(</span>v3PositionIndex<span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> gl<span class="token punctuation">.</span><span class="token constant">FLOAT</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 开始绘制三角形，顶点从0开始，绘制3次</span>
gl<span class="token punctuation">.</span><span class="token function">drawArrays</span><span class="token punctuation">(</span>gl<span class="token punctuation">.</span><span class="token constant">TRIANGLES</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// ...</span>
</code></pre></div><div class="right-pendant"><a href="dingtalk://dingtalkclient/action/sendmsg?dingtalk_id=zpizb5p" class="pendant__icon"><img title="点击跳转钉钉联系我" src="/blog/assets/img/dingdinglogo.png" alt="点击跳转钉钉联系我"></a><a href="javascript:;" class="pendant__icon"><div class="img-container"><div><!----> <img src="/blog/assets/img/myqq.jpg" class="cover-img"></div></div></a><a href="javascript:;" class="pendant__icon"><div class="img-container"><div><!----> <img src="/blog/assets/img/mywx.jpg" class="cover-img"></div></div></a></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">更新时间:</span> <span class="time">2023年7月8日星期六下午4点01分</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/blog/article/web3D/webgl/WebGL2_Attr.html" class="prev">
        WebGL2 属性
      </a></span> <span class="next"><a href="/blog/article/web3D/webgl/WebGL2_Interface.html">
        WebGL2 接口
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/blog/assets/js/app.7b4540b9.js" defer></script><script src="/blog/assets/js/2.b0da3abb.js" defer></script><script src="/blog/assets/js/52.dfcb8f83.js" defer></script><script src="/blog/assets/js/11.d9c57454.js" defer></script><script src="/blog/assets/js/6.e0517a23.js" defer></script><script src="/blog/assets/js/4.e142f4c4.js" defer></script>
  </body>
</html>
